<template>
	<view>
			<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
				<view class="mt-5 h_100" v-if="u_loadmore">
					<u-loadmore status="loading" icon-type="circle" />
					<view class="d-flex flex-column w-100 a-center j-center h_100">
						<image src="../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
						<view class="">加载中</view>
					</view>
				</view>
				<view v-else>
					<view class="m-2 bg-white rounded-20">
						<view class="d-flex a-center today_title p-2 rounded-top">
							<view class="rounded-50 d-flex user_img j-center a-center">
								<u-icon name="coupon" color="#ff6b69" size="35"></u-icon>
							</view>
							<view class="font-md font-weight">【售后】订单状态：{{order_detail.label_return_status}}</view>
						</view>
						<view class="bg-white d-flex j-sb p-3 rounded-bottom a-center">
							<view class="">
								<view class="d-flex pb-1">
									<u-icon name="map" color="#" size="35"></u-icon>
									<view class="ml-2 font-md font-weight">{{order_detail.consignee}}&nbsp;&nbsp;&nbsp;{{order_detail.mobile}}</view>
								</view>
								<view class="text-muted font-29">{{order_detail.consignee_item.province+order_detail.consignee_item.city+order_detail.consignee_item.district+order_detail.address}}</view>
							</view>
							<!-- <view v-if="!(order_detail.label_return_status==='待收货'||order_detail.label_return_status==='已完成')"  class=""  @click="address(order_id)">
								<u-icon  name="arrow-right" color="#888888" size="35"></u-icon>
							</view> -->
						</view>
					</view>
					<view class="m-2 rounded-20 py-4 pl-3 bg-white font-md">
						<view class="d-flex">
							<view class="">订单编号:</view>
							<view class="ml-6 font-weight">{{order_detail.order_sn}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="py-2">下单时间:</view>
							<view class="ml-6 font-weight border-bottom flex-1 py-3">{{order_detail.order_time}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="">支付方式:</view>
							<view class="ml-6 font-weight">{{order_detail.pay_name}}</view>
						</view>
						<!-- <view class="d-flex pb-3">
							<view class="">支付时间:</view>
							<view class="ml-6 font-weight">{{order_detail.formated_add_time}}</view>
						</view> -->
						<view class="d-flex pb-3">
							<view class="pb-2">订单来源:</view>
							<view class="ml-6 font-weight border-bottom flex-1 pb-3">{{order_detail.label_order_source}}</view>
						</view>
						<view class="d-flex ">
							<view class="pb-2">配送方式:</view>
							<view class="ml-6 font-weight flex-1 pb-3">{{order_detail.shipping_name}}</view>
						</view>
					</view>
					<view class="m-2 pl-3 bg-white rounded-20">
						<view class="border-bottom py-3 d-flex j-sb a-center" @click="client">
							<view class="d-flex a-center">
								<view class="rounded-50 d-flex user_img j-center a-center">
									<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
								</view>
								<view class="font-weight ml-2">{{order_detail.mobile}}</view>
							</view>
							<view class="mr-2">
								<u-icon name="arrow-right" color="#777777" size="35"></u-icon>
							</view>
						</view>	
						<view class="border-bottom py-2 j-sb">
							<view class="d-flex">
								<view class="">
									<image class="detail_hot rounded-20"  :src="order_detail.goods_items.img.url" mode=""></image>
								</view>
								<view class="ml-2 flex-1 font-28">
									<view class="ellipsis">{{order_detail.goods_items.goods_name}}</view>
									<view class="text-muted font-29">{{order_detail.goods_attr}}</view>
									<view class="d-flex j-sb pt-2">
										<view class="font-weight">{{order_detail.goods_items.formatted_shop_price}}</view><view class="text-muted j-end mr-3">x{{order_detail.goods_items.return_number}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="d-flex pb-3">
							<view class="py-2">申请时间:</view>
							<view class="ml-6 font-weight border-bottom flex-1 py-3">{{order_detail.apply_time}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="">服务类型:</view>
							<view class="ml-6 font-weight">{{order_detail.return_type=="return"?'退货':'维修'}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="">申请原因:</view>
							<view class="ml-6 font-weight">{{order_detail.label_return_reason}}</view>
						</view>
						<view class="d-flex pb-3">
							<view class="white-space">问题描述:</view>
							<view class="ml-6 font-weight">{{order_detail.return_description}}</view>
						</view>
						<view class="d-flex pb-1">
							<view class="white-space">凭证图片:</view>
							<view class="d-flex flex-wrap" v-if="order_detail.return_images.length>0">
								<view class="ml-5 pb-2" v-for="(item,index) in order_detail.return_images" :key='index'>
									<view class="ml-1">
										<image class="return_images" :src="item" mode="" @click="previewImage(item)"></image>
									</view>
								</view>
							</view>
							<view class="ml-6 font-weight" v-else>无</view>
						</view>
					</view>	
				</view>
			</scroll-view>
			<!-- 底部 -->
			<view class="bg-white footer" :class="Device.model=='iPhone X'?'footerX':''">
				<view class="py-2 bg-white w-100">
					<view class="d-flex j-end">
						<view v-if="order_detail.label_return_status=='待审核'" class="py-1 px-3 border mr-2 rounded-30" @click="agreement">同意申请</view>
						<view v-if="order_detail.label_return_status=='已审核'" class="py-1 px-3 border mr-2 rounded-30" @click="withdraw">收到退回商品</view>
						<view v-if="order_detail.label_return_status=='收到寄回商品'&&order_detail.return_type=='service'" class="py-1 px-3 border mr-2 rounded-30" @click="rebate">寄出商品</view>
						<view v-if="order_detail.label_return_status=='已寄出商品'||order_detail.label_return_status=='已完成'" class="py-1 px-3 border mr-2 rounded-50" @click.stop="service">完成维修</view>
						<view class="py-1 px-3 border mr-2 rounded-30" @click="option">更多操作</view>
					</view>
				</view>
			</view>
		<!-- 更多操作 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="shareShow">
			<!-- 内容 -->
			<view class="m-2 bg-white rounded-20 icon_share py-2">
				<!-- 待发货 -->
				<view class="border-bottom d-flex py-4" v-if="order_detail.label_return_status==='待审核'">
					<view class="text-center span-5" @click="agreement" >
						<image  src="../../static/images/order/agreement.png" mode=""></image>
						<view class="font-28">同意申请</view>
					</view>
				</view>
				<view class="border-bottom d-flex py-4" v-if="order_detail.label_return_status==='已审核'">
					<view class="text-center span-5" @click="withdraw" >
						<image  src="../../static/images/order/receive_order.png" mode=""></image>
						<view class="font-28">收到退回商品</view>
					</view>
				</view>
				<view class="border-bottom d-flex py-4" v-if="order_detail.label_return_status==='收到寄回商品'&&order_detail.return_type=='service'">
					<view class="text-center span-5" @click="rebate" >
						<image  src="../../static/images/order/agreement.png" mode=""></image>
						<view class="font-28">寄出商品</view>
					</view>
				</view>
					
				<view class="d-flex py-4">
					<view class="text-center flex-1" @click="client(order_id)">
						<image src="../../static/images/order/customer.png" mode=""></image>
						<view class="font-28">客户详情</view>
					</view>
					<view class="text-center flex-1" @click="contact">
						<image src="../../static/images/order/connection.png" mode=""></image>
						<view class="font-28">联系买家</view>
					</view>
					<view class="text-center flex-1" @click="popupRecord(order_id)">
						<image src="../../static/images/order/operation.png" mode=""></image>
						<view class="font-28">操作记录</view>
					</view>
					<view class="text-center flex-1" @click="refresh(order_id)">
						<image src="../../static/images/order/refresh.png" mode=""></image>
						<view class="font-28">刷新</view>
					</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-1 rounded-25 text-primary" @click="cancelShare">
				取消
			</view>
		</s-popup>
		
		<u-modal v-model="contact_show"  confirm-text="呼叫" :show-title="false" @confirm="contact_comfirm" show-confirm-button show-cancel-button cancel-color="#2b85e4" confirm-color="#2b85e4">
			<view class="py-5">
				<view class="text-center">{{order_detail.mobile}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
				sPopup
		},
		data() {
			return {
				shareShow:false,
				return_id:"", // 订单ID
				order_detail:"", // 订单详情列表
				
				contact_show:false, // 联系买家
				scrollHeight:0, // 屏幕高度
				Device:JSON.parse(uni.getStorageSync("client")),
				u_loadmore:true, // 加载中
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods: {
			// 同意申请
			agreement(){
				this.$H.post("admin/order/return/operate/agree",{
					return_id:this.order_detail.return_id
				}).then(res=>{
					if(res.data){
						this.$u.toast("申请通过")
						uni.navigateBack({
							delta:1
						})
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			// 收回退换货
			withdraw(){
				this.$H.post("admin/order/return/operate/receive",{
					return_id:this.order_detail.return_id
				}).then(res=>{
					if(res.data){
						this.$u.toast("已确定收到退货商品")
						uni.navigateBack({
							delta:1
						})
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			// 寄出商品
			rebate(){
				uni.navigateTo({
					url:'/pagesA/order/order-send-off?order_id='+this.order_detail.order_id
				})
			},
			// 完成维修
			service(){
				uni.navigateTo({
					url:'/pagesA/order/order-service?order_id='+this.order_detail.order_id
				})
			},
			
			// 客户详情
			client(){
				this.shareShow=false
				uni.navigateTo({
					url:"/pagesA/order/order-client?user_id="+this.order_detail.user_id
				})
			},
			// 操作记录
			popupRecord(order_id){
				this.shareShow=false
				uni.navigateTo({
					url:`/pagesA/order/order-record?return_id=${this.return_id}`
				})
			},
			// 联系买家
			contact(){
				this.contact_show=true
			},
			// 确认呼叫
			contact_comfirm(){
				this.shareShow=false
				uni.makePhoneCall({
				    phoneNumber: this.order_detail.mobile //仅为示例
				});
			},
			// 打开弹框
			option(){
				this.shareShow=true
			},
			// 关闭弹框
			cancelShare(){
				this.shareShow=false
			},
			// 刷新
			refresh(){
				this.shareShow=false
				uni.showLoading({
					title:"刷新中",
					success: () => {
						this.$H.post("admin/orders/detail",{id:this.order_id}).then(res=>{
							console.log(res)
							this.order_detail=res.data
						})	
					}
				})
				setTimeout(function () {
				    uni.hideLoading();
				}, 2000);
			},
			// 预览图片
			previewImage(url){
				let photoList = [];
				photoList.push(url);
				uni.previewImage({
					current: 0,
				    urls: photoList // 图片路径必须是一个数组
				});	
			}
		},
		onShow() {
			if(this.return_id){
				this.$H.post("admin/order/return/detail",{return_id:this.return_id}).then(res=>{
					this.order_detail=res.data
				})
			}
		},
		onLoad(e) {
			console.log(e)
			this.return_id=e.return_id
			this.$H.post("admin/order/return/detail",{return_id:e.return_id}).then(res=>{
				this.order_detail=res.data
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	.user_img{
		width: 40upx;
		height: 40upx;
		background-color: #ffd1d0;
	}
	.today_title{
		background: linear-gradient(to right,#ffeee9,#ffd3cc);
	}
	.detail_hot{
		width: 150upx;
		height: 150upx;
	}
	.footer{
		height: 100upx;
	}
	.footerX{
		height: 120upx;
	}
	.flow{
		background-image: linear-gradient(to right,#ef2b4d,#f66143);
	}
	.s-popup-mask{
		background: rgba(204,204,204,0.3)!important;
	}
	.content{
		background-color:rgb(237,237,237)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
	.return_images{
		width: 120upx;
		height: 120upx;
	}
</style>
